<template>
	<view>

		<u-row>
			<u-col span="12">

				<view>
					<!-- 背景图 -->
					<image class="img1" :src="require('')"></image>
					
				</view>
			</u-col>
		</u-row>
		<u-row flex-wrap="wrap">
			<view class="wenzi">
				<u-col span="12">
					<view
						style=" color: #DD524D;height: 40px;display:flex;justify-content: space-between;line-height: 30px;flex-wrap: nowrap;">
						<view>
							<view class="top-img"></view>
							<!-- <image style="width: 40px;height: 30px;" :src="require('../img/afzr3-umign.jpg')"></image> -->
							<text style="font-size:13px;margin-top: -10px;margin-left:50px; #FFFFFF;">康成大数据</text>
						</view>
						<view
							style="line-height: 22px; text-align: center; height: 25px;width:110px; background-color:#DD524D;border-radius: 25px;margin-left: 75px;">
							<text class="gd">更多疫情信息</text>
						</view>
					</view>
				</u-col>
				<u-col span="12">
					<view style="color: #DD524D;height:33px;margin-left:16px">
						<text style="font-size: 24px;color: #FFFFFF;font-weight: 700;">科学防护 共渡难关</text>
					</view>
				</u-col>
				<u-col span="12">
					<view>
						<text style="color: #FFFFFF;font-size: 16px;margin-left: 16px;">肺炎疫情实时动态播报</text>
					</view>
				</u-col>
			</view>
		</u-row <!-- 疫情表 -->
		<view class="row">
			<view class="main">
				<!-- 一 -->
				<u-row justify="center">
					<u-col span="6">												
						<view class="tabs" :class="navIndex==0?'activite':''" @click="checkIndex(0)">全国疫情</view></u-col>					
					<u-col span="6">
						<view class="tabs" :class="navIndex==1?'activite':''" @click="checkIndex(1)">广东疫情</view></u-col>
				</u-row>
				<!-- 二 -->
			</view>
			<!-- 0 -->
			<view class="content" v-if="navIndex==0">
				<!-- 第一层 -->
				<u-row>
					<u-col span="12">
						<view class="demo-layout" style="margin-top: 15px;">
							<u-row>
								<u-col span="4">
									<view class="t">
										<view class="texts"> <text>境外输入</text></view>
										<view class="shuzi">
											<u-count-to fontSize="24" color="" autoplay :startVal="30" :endVal="125090"></u-count-to>
										</view>
										<view class="shuzix"><text>较昨日<text class="texth">+40</text></text></view>
									</view>
								</u-col>
								<!-- 二 -->
								<u-col span="4">
									<view class="t">
										<view class="texts"> <text>无症状感染者</text></view>
										<view class="shuzi zy">
											<u-count-to fontSize="24" color="" autoplay :startVal="30" :endVal="12344">
											</u-count-to>
										</view>
										<view class="shuzix"><text>较昨日<text class="texth2 zy">+5559</text></text></view>
									</view>
								</u-col>
								<!-- 三 -->
								<u-col span="4">
									<view class="t">
										<view class="texts"> <text>现有确诊</text></view>
										<view class="shuzi zys">
											<u-count-to fontSize="24" color="" autoplay :startVal="30" :endVal="77623"></u-count-to>
										</view>
										<view class="shuzix"><text>较昨日<text class="texth3 zys">-63</text></text></view>
									</view>
								</u-col>
							</u-row>
						</view>
					</u-col>
				</u-row>
				<!-- 第二层 -->
				<u-row>
					<u-col span="12">
						<view class="demo-layout" style="margin-top: 15px;margin-bottom: 10px;">
							<u-row>
								<u-col span="4">
									<view class="t">
										<view class="texts"> <text>累计确诊</text></view>
										<view class="shuzi t4">
											<u-count-to fontSize="24" color="" autoplay :startVal="30" :endVal="53422">
											</u-count-to>
										</view>
										<view class="shuzix"><text>较昨日<text class="t4">+2593</text></text></view>
									</view>
								</u-col>
								<!-- 二 -->
								<u-col span="4">
									<view class="t">
										<view class="texts"> <text>累计死亡</text></view>
										<view class="shuzi t41">
											<u-count-to fontSize="24" color="" autoplay :startVal="30" :endVal="12332">
											</u-count-to>

										</view>
										<view class="shuzix"><text>较昨日<text class="t41">+119</text></text></view>
									</view>
								</u-col>
								<!-- 三 -->
								<u-col span="4">
									<view class="t">
										<view class="texts"> <text>累计自愈</text></view>
										<view class="shuzi t42">
											<u-count-to fontSize="24" color="" autoplay :startVal="30" :endVal="898723">
											</u-count-to>
										</view>
										<view class="shuzix"><text>较昨日<text class="t42">+62124</text></text></view>
									</view>
								</u-col>
							</u-row>


						</view>
					</u-col>
				</u-row>
				<!-- 第三层 -->
				<u-row justify-content="center">
					<u-col span="6">
						<view style="padding-left:10px ;"><text style="color:#999999;font-size:12px">截至 </text><text
								style="font-size:12px;color:#999999">{{data}}</text></view>
					</u-col>
					<u-col span="6">
						<view>
							<view style="padding-left: 65px;">
								<u-icon labelSize="12px" labelColor="#999999" label="数据说明" name="question-circle"
									color="#999999" size="14"></u-icon>

							</view>
						</view>
					</u-col>
				</u-row>

			</view>
			<!-- 1 -->
			<view class="content" v-if="navIndex==1">
				<!-- 第一层 -->
				<u-row>
					<u-col span="12">
						<view class="demo-layout" style="margin-top: 15px;margin-bottom: 10px;">
							<u-row>
								<u-col span="4">
									<view class="t">
										<view class="texts"> <text>累计确诊</text></view>
										<view class="shuzi t4">
											<u-count-to fontSize="24" color="" autoplay :startVal="30" :endVal="5090">
											</u-count-to>
										</view>
										<view class="shuzix"><text>较昨日<text class="t4">+2593</text></text></view>
									</view>
								</u-col>
								<!-- 二 -->
								<u-col span="4">
									<view class="t">
										<view class="texts"> <text>累计死亡</text></view>
										<view class="shuzi t41">
											<u-count-to fontSize="24" color="" autoplay :startVal="30" :endVal="5090">
											</u-count-to>
										</view>
										<view class="shuzix"><text>较昨日<text class="t41">+119</text></text></view>
									</view>
								</u-col> 
								<!-- 三 -->
								<u-col span="4">
									<view class="t">
										<view class="texts"> <text>累计自愈</text></view>
										<view class="shuzi t42">
											<u-count-to fontSize="24" color="" autoplay :startVal="30" :endVal="511090">
											</u-count-to>
										</view>
										<view class="shuzix"><text>较昨日<text class="t42">+62124</text></text></view>
									</view>
								</u-col>
							</u-row>


						</view>
					</u-col>
				</u-row>
				<!-- 第二层 -->
				<u-row justify-content="center">
					<u-col span="6">
						<view style="padding-left:10px ;"><text style="color:#A9A9A9;font-size:12px">截至 </text><text
								style="font-size:12px;color:#A9A9A9">{{data}}</text></view>
					</u-col>
					<u-col span="6">
						<view>
							<view style="padding-left: 65px;">
								<u-icon labelSize="12px" labelColor="#A9A9A9" label="数据说明" name="question-circle"
									color="#A9A9A9" size="14"></u-icon>

							</view>
						</view>
					</u-col>
				</u-row>
				<!-- 第三层 -->
				<u-row justify-content="space-between">
					<view class="inputs1">
						<u-col span="6">
							<view class="inputs">
								<view>
									<u-icon name="map" color="#A9A9A9" size="18"></u-icon>
								</view>
								<view>
									广东
								</view>
							</view>
						</u-col>
						<u-col span="6">
							<view class="inputs bor">了解更多</view>
						</u-col>
					</view>
				</u-row>
			</view>
		</view>
		</u-col>
		</u-row>
	</view>
	<!-- 。。。。。 -->
</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				data: new Date().toISOString().slice(0, 10),
			}
		},

		methods: {
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},


		},
		onLoad() {}
	}
</script>
<style lang="scss">
	.img1 {
		background-color: #AFF0B5;
		// background-color: #E8FFEA;
	}

	.wenzi {
		// background-color: #007AFF;
		position: relative;
		z-index: 99;
		margin-top: -370px;

		.top-img {
			position: absolute;
			width: 50px;
			height: 50px;
			left: 5px;
			top: -13px;
			background: url(img/afzr3-umign.png) no-repeat;
			background-size: 100% 100%;

		}

		// 更多疫情
		.gd {
			font-size: 12px;
			color: #FFFFFF;
		}

		.gd:before {
			content: "";
			position: absolute;
			right: 9px;
			top: 9px;
			width: 8px;
			height: 8px;
			background: url() no-repeat;
			background-size: 100% 100%;
		}
	}


	.row {
		width: 88%;
		height: 100%;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin: 0 auto;
		margin-top: -100px;
		background-color: #FFFFFF;
		z-index: 99;
		position: relative;
		border-radius: 6px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.content,
	.main {
		width: 100%;
		border-radius: 6px;
	}

	.demo-layout {
		height: 68px;
		margin-bottom: 2px;
		width: 100%;

		.t {
			text-align: center;

			.texts {
				font-size: 12px;
				font-weight: 700;
				color: #333333;
				height: 20px;
			}

			.shuzi {
				color: #F0AD4E;
				font-size: 24px;
				line-height: 30px;
				height: 30px;
			}

			.zy {
				color: #791618;
			}

			.zys {
				color: #E44A3D;
			}

			// 第二层
			.t4 {
				color: #a31d13;
			}

			.t41 {
				color: #333;
			}

			.t42 {
				color: #34aa70;
			}

			.shuzix {
				font-size: 10px;
				color: #999999;
				height: 20px;
				line-height: 20px;

				.texth {
					color: #F0AD4E;
					;
				}

			}
		}
	}

	// 广东疫情
	.inputs1 {
		display: flex;
		width: 100%;
		font-size: 12px;

		.inputs {
			width: 120px;
			height: 30px;
			border: 1px solid #999999;
			border-radius: 100px;
			margin: 10px auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bor {
			border: 1px solid #DD524D;
			color: #DD524D;
		}
	}

	.tabs {
		height: 30px;
		text-align: center;
		line-height: 30px;

		background-color: #F1F1F1;
	}

	.activite {
		color: #04c9c3;
		background-color: #FFFFFF;
	}
</style>
